<template>
	
	<Header></Header>
	
	<!-- 轮播图 -->
	<div style="margin-top: 52px;">
		<el-carousel :interval="5000" arrow="always" height="220px">
		    <el-carousel-item v-for="(item,index) in bannerList" :key="index" style="height: 220px">
				<img style="width: 100%;height:220px" :src="item.imgUrl"/>
		      <!-- <h3 text="2xl" justify="center">{{ item.imgUrl }}</h3> -->
		    </el-carousel-item>
		  </el-carousel>
	</div>
	
	
	<!-- 新闻 -->
	<div class="blog-single ">
	    <div class="container">
	        <div class="related-blog">
	            <div class="wrap-title">
	                <h5>{{newsInfo.title}}</h5>
	            </div>
	            <div class="row" v-for="(item,index) in newList.slice(0,4)" :key="index">
	                <div class="col s4">
	                    <div class="content-image">
							<router-link :to="`/detail?id=${item.id}&parentId=${item.parentId}`" >
								<img :src="item.imgUrl"/>
							</router-link>
	                        
	                    </div>
	                </div>
	                <div class="col s8">
	                    <div class="content-text">
							<router-link :to="`/detail?id=${item.id}&parentId=${item.parentId}`" >
								<h5>{{item.title}}</h5>
							</router-link>
	                        <p class="date">{{item.createTime}}</p>
	                    </div>
	                </div>
	            </div>
	            
	        </div>
	        
	    </div>
	</div>
	
	
	
	<!-- 业务布局 -->
	<div class="features segments" style="padding-bottom: 0px;">
	    <div class="container">
			<div class="section-title">
			    <h3>{{buju.title}}</h3>
			</div>
	        <div class="row">
	            <div class="col s4" v-for="(item,index) in buju.list" :key="index" style="margin-bottom: 20px;">
	                <div class="content">
						<img :src="item.imgUrl" style="width: 30px;height: 30px;margin: 0px auto 13px auto"/>
	                    <!-- <i class="fas fa-desktop"></i> -->
	                    <h6>{{item.title}}</h6>
	                </div>
	            </div>
	           
	        </div>
	       
	    </div>
	</div>
	
	
	<!-- 经典案例 -->
	<div class="latest-news segments">
	    <div class="container">
	        <div class="section-title">
	            <h3>{{anli.title}}</h3>
	        </div>
	        <div class="row">
	            <div class="col s6" v-for="(item,index) in anli.list" :key="index">
	                <div class="content" style="position: relative;">
	                    <router-link :to="`/detail?id=${item.id}&parentId=${item.parentId}`" >
							<h5 class="content-h5">{{item.title}}</h5>
	                    	<img :src="item.imgUrl" style="height: 120px;margin-bottom: 10px;"/>
	                    </router-link>
	                   
	                </div>
	            </div>
	          
	        </div>
	    </div>
	</div>
	
	<Footer></Footer>
		
</template>

<script setup>
	import api from "@/api/index"
	let bannerList=ref([])//轮播图
	let buju=ref([])//业务布局
	let newsInfo=ref()//新闻咨询
	let newList=ref()//新闻咨询
	let zeren=ref([])//社会责任
	let anli=ref([])//案例

	onBeforeMount(()=>{
		//banner图片
		api.getCarouselimg().then(res => {
			bannerList.value=res.data.data.records
		})
		//首页全部内容
		api.getIndex().then(res => {
			//console.log(res.data.data)
			// allData.value=res.data.data.casesList
			var data=res.data.data
			newsInfo.value=data.newsInfo
			newList.value=data.newsInfo.list[0].articleList
			buju.value=data.casesList[1]
			anli.value=data.casesList[0]
			
		})
	})
	
</script>

<style scoped>
	.content-h5{background: rgba(0,0,0,0.5);position:absolute;color: #fff;padding: 0px 6px;line-height:20px;display: block;width: 100%;padding: 3px 3px;font-size:14px;}
	.wrap-title-ok{background:none;color: #333}
	.text-t1{line-height: 20px;height: 40px;overflow: hidden;display: block;}
	.el-carousel__item h3 {
	  color: #475669;
	  opacity: 0.75;
	  line-height: 300px;
	  margin: 0;
	  text-align: center;
	}
	.el-carousel__item:nth-child(2n) {
	  background-color: #99a9bf;
	}
	
	.el-carousel__item:nth-child(2n + 1) {
	  background-color: #d3dce6;
	}
	.section-title{display: flex;font-size: 16px;font-weight:bold;color: #333;align-items: center;}
	.section-title div{margin-right: 10px;}
	.section-Selected{font-size: 18px;font-weight: 600;color:#409eff;}
</style>